<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>用户注册表单页</title>
		<style>
			/*#form_content {
				width: 600px;
				margin: 0 auto;
				position: absolute;
				left: 400px;
			}*/
			
			#form_content .dc {
				width: 600px;
				margin-top: 10px;
				overflow: hidden;
			}
			
			
			
			#form_content b {
				display: inline-block;
				height: 40px;
				line-height: 40px;
				margin-left: 20px;
			}
			
			#form_content input {
				display: inline-block;
				height: 34px;
				width: 200px;
				border-radius: 2px;
				margin-left: 60px;
				padding-left: 10px;
			}
			
			.pc {
				width: 200px;
				height: 40px;
				float: right;
				line-height: 40px;
				text-align: center;
				margin: 0 20px 0;
				background: #333;
				color: #fff;
				font-weight: bold;
				border-radius: 8px;
				display: none;
			}
			
			input#sub {
				display: inline-block;
				width: 215px;
				background: #f0f;
				margin-left: 144px;
			}
			
			.show_pass {
				background: limegreen;
				display: block;
			}
			
			.show_warn {
				background: #e4393c;
				display: block;
			}
			
			/*#audio_bground {
				width: 100%;
				height: 100%;
				background: #afa;
				position: absolute;
				z-index: -10;
			}*/
		</style>
	</head>

	<body>

		<form>
			<!--email属性-->
			<!--  邮箱类型<input type="email"/><br/>-->
			<!--tel属性-->
			<!--电话类型<input type="tel"/><br/>-->
			<!--number属性-->
			<!-- 数字类型<input type="number"/><br/>-->
			<!--date属性-->
			<!-- 日期类型<input type="date"/><br/>-->
			<!--month属性-->
			<!--月份类型<input type="month"/><br/>-->
			<!--week属性-->
			<!--周期类型<input type="week"/><br/>-->
			<!--range属性-->
			<!-- 数字范围<input type="range" min="18" max="60"/><br/>-->
			<!--search属性-->
			<!-- 搜素类型<input type="search"/><br/>-->
			<!--color属性-->
			<!--颜色选择器<input type="color"/><br/>-->
			<!--url属性-->
			<!-- 网址类型<input type="url"/><br/>-->
			<!--<input type='submit'/>-->
		</form>
		<hr/>
		<div id="form_content">
			<form action="">

				<div class="dc"><b>用户昵称</b><input id="user" type="text" autofocus required pattern="^[0-9a-zA-Z]{6,10}$" />
					<p class="pc">请输入用户名</p>
				</div>
				<div class="dc"><b>用户密码</b><input id="pwd" type="password" required pattern="^\w{8,12}$" />
					<p class="pc">请输入密码</p>
				</div>
				
				
				<div class="dc"><input id="sub" type="submit" value="提交注册" /></div>
			</form>
		</div>
		<script src="js/jquery-1.11.2.min.js"></script>
		<script>
			/*var uname = document.getElementById('user');
			uname.onfocus = function() {
				this.nextElementSibling.style.display = 'block';
				this.nextElementSibling.innerHTML = '8-12数字或字母组成';
			}
			uname.onblur = function() {
				if(this.validity.valid) {
					this.nextElementSibling.className = 'pc show_pass';
					this.nextElementSibling.innerHTML = '用户名格式正确';
				} else if(this.validity.valueMissing) {
					this.nextElementSibling.className = 'pc show_warn';
					this.nextElementSibling.innerHTML = '用户名不能为空';
				} else if(this.validity.patternMismatch) {
					this.nextElementSibling.className = 'pc show_warn';
					this.nextElementSibling.innerHTML = '用户名格式非法';
				}
			}
			var upwd = document.getElementById('pwd');
			upwd.onfocus = function() {
				this.nextElementSibling.style.display = 'block';
				this.nextElementSibling.innerHTML = '6-12位数字/字母/英文符号组成';
			}
			upwd.onblur = function() {
				if(this.validity.valid) {
					this.nextElementSibling.className = 'pc show_pass';
					this.nextElementSibling.innerHTML = '密码格式正确';
				} else if(this.validity.valueMissing) {
					this.nextElementSibling.className = 'pc show_warn';
					this.nextElementSibling.innerHTML = '用户密码不能为空';
				} else if(this.validity.patternMismatch) {
					this.nextElementSibling.className = 'pc show_warn';
					this.nextElementSibling.innerHTML = '密码格式非法';
				}
			}
			
			*/
					
		</script>
	</body>

</html>